<template>
  <!-- 编辑资料页 -->
  <div class="profile">
    <myheader page="编辑资料">
      <span
        class="iconfont iconjiantou2"
        slot="left"
        @click="$router.back()"
      ></span>
      <span slot="right" style="font-size: 20px"
        ><van-icon name="wap-home-o" @click="$router.push({ name: 'index' })"
      /></span>
    </myheader>
    <div class="portrait">
      <img :src="user.head_img" />
      <van-uploader :after-read="afterRead" class="read" />
    </div>
    <!-- 昵称 -->
    <hmcell
      title="昵称"
      :desc="user.nickname"
      @click="nickshow = !nickshow"
    ></hmcell>

    <van-dialog
      v-model="nickshow"
      title="昵称编辑"
      show-cancel-button
      @confirm="updateNickname"
      @cancel="editvalue.nickname = user.nickname"
    >
      <van-field
        v-model="editvalue.nickname"
        required
        label="昵称"
        placeholder="请输入昵称"
      />
    </van-dialog>

    <!-- 密码 -->
    <hmcell
      title="密码"
      desc="******"
      @click="passwordshow = !passwordshow"
    ></hmcell>

    <van-dialog
      title="修改密码"
      v-model="passwordshow"
      show-cancel-button
      @confirm="nickword"
      @cancel="editvalue.password = editvalue.old = ''"
      :before-close="beforeClose"
    >
      <van-field
        v-model="editvalue.old"
        type="password"
        required
        label="原密码"
      />
      <van-field
        v-model="editvalue.password"
        type="password"
        required
        label="新密码"
      />
    </van-dialog>
    <!-- 性别 -->
    <hmcell
      title="性别"
      :desc="user.gender == 1 ? '男' : '女'"
      @click="gendershow = !gendershow"
    ></hmcell>

    <van-dialog
      v-model="gendershow"
      title="修改性别"
      show-cancel-button
      @confirm="nickgender"
      @cancel="editvalue.gender = user.gender"
    >
      <van-picker
        :columns="['女', '男']"
        :default-index="user.gender"
        @change="genderChange"
      />
    </van-dialog>
  </div>
</template>

<script>
import hmcell from "@/components/hmcell.vue";
import { myuser } from "@/apis/user.js";
import axios from "@/utils/myaxios.js";
import myheader from "@/components/header.vue";
import { myupload } from "@/apis/upload.js";
import { myprofile } from "@/apis/user.js";
export default {
  data() {
    return {
      nickshow: false,
      passwordshow: false,
      gendershow: false,
      user: {},
      editvalue: {
        password: "",
        old: "",
      },
    };
  },
  components: {
    hmcell,
    myheader,
  },
  async mounted() {
    let res = await myuser(this.$route.params.id);
    if (res.data.message == "获取成功") {
      res.data.data.head_img = axios.defaults.baseURL + res.data.data.head_img;
      this.user = res.data.data;
      this.editvalue.nickname = this.user.nickname;
      // this.editvalue.gender = this.user.gender;
    }
  },
  methods: {
    async afterRead(myfile) {
      // 此时可以自行将文件上传至服务器
      let formData = new FormData();
      formData.append("file", myfile.file);
      let ter = await myupload(formData);

      this.user.head_img = axios.defaults.baseURL + ter.data.data.url;
      if (ter.data.message == "文件上传成功") {
        let res2 = await myprofile(this.user.id, {
          head_img: ter.data.data.url,
        });
        this.$toast.success("用户头像修改成功");
      }
    },
    async updateNickname() {
      let res = await myprofile(this.user.id, {
        nickname: this.editvalue.nickname,
      });
      this.user.nickname = this.editvalue.nickname;
      this.$toast.success("用户昵称修改成功");
    },
    async nickword() {
      console.log(1);
      let mimas = await localStorage.getItem("mimas");

      let res = JSON.parse(mimas);

      if (res.password == this.editvalue.old) {
        if (/^.{3,}$/.test(this.editvalue.password)) {
          let res2 = await myprofile(this.user.id, {
            password: this.editvalue.password,
          });
          this.$toast.success("用户密码修改成功");
          res.password = this.editvalue.password;
          localStorage.setItem("mimas", JSON.stringify(res));
          // this.$router.push({ name: "login" });
          this.editvalue.password = this.editvalue.old = "";
        } else {
          this.$toast.fail("新密码格式错误");
        }
      } else {
        this.$toast.fail("原密码错误");
      }
    },
    beforeClose(action, done) {
      if (action == "confirm") {
        let mimas = localStorage.getItem("mimas");
        let res = JSON.parse(mimas);
        if (res.password != this.editvalue.old) {
          done(false);
        } else {
          if (!/^.{3,}$/.test(this.editvalue.password)) {
            done(false);
          } else {
            done();
          }
        }
      } else {
        done();
      }
    },
    genderChange(p, pp, index) {
      this.editvalue.gender = index;
    },
    async nickgender() {
      let res = await myprofile(this.user.id, {
        gender: this.editvalue.gender,
      });
      this.user.gender = this.editvalue.gender;
      this.$toast.success("用户性别修改成功");
    },
  },
};
</script>

<style lang="less" scoped>
.profile {
  height: 100vh;
  background-color: #eaeaea;
  .portrait {
    display: flex;
    justify-content: center;
    padding: 30px 0;
    position: relative;
  }
  img {
    display: block;
    height: 80 * 100vw/360;
    width: 80 * 100vw/360;
    border-radius: 50%;
  }
  .read {
    position: absolute;
    opacity: 0;
  }
}
</style>